<template>
  <div class="ground">
    <a-card size="small" title="任务清单" style="width: 100%" class="list">
      <a-tree
        v-model="checkedKeys"
        checkable
        :expanded-keys="expandedKeys"
        :auto-expand-parent="autoExpandParent"
        :selected-keys="selectedKeys"
        :tree-data="treeData"
        @expand="onExpand"
        @select="onSelect"
      />
      <a-button type="primary" @click="addList">
        + 新建
      </a-button>
    </a-card>
    <!-- 新建弹窗 -->
    <a-modal v-model="visible" title="新建任务" on-ok="handleOk">
      <template slot="footer">
        <a-button key="back" @click="handleCancel">
          取消
        </a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="loading"
          @click="handleOk"
        >
          确认
        </a-button>
      </template>
      <a-form-model
        :model="form"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item label="任务编码">
          <a-input v-model="form.name" />
        </a-form-model-item>
        <a-form-model-item label="任务中文名">
          <a-input v-model="form.nameCN" />
        </a-form-model-item>
        <a-form-model-item label="任务英文名">
          <a-input v-model="form.nameEN" />
        </a-form-model-item>
        <a-form-model-item label="任务类型">
          <a-select v-model="form.taskType" placeholder="please select">
            <a-select-option value="shanghai">
              text one
            </a-select-option>
            <a-select-option value="beijing">
              text two
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="工程路径">
          <a-upload
            name="file"
            :multiple="true"
            action="#"
            :headers="headers"
            @change="handleChange"
          >
            <a-button>
              <a-icon type="upload" />
              Click to Upload
            </a-button>
          </a-upload>
        </a-form-model-item>
        <a-form-model-item label="任务标签">
          <a-tag color="green">
            ERP
          </a-tag>
          <a-tag color="red">
            考勤
          </a-tag>
          <a-tag color="orange">
            财务
          </a-tag>
          <a-tag color="green">
            电子流
          </a-tag>
          <a-tag color="cyan">
            简历
          </a-tag>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
const treeData = [
  {
    title: '0-0',
    key: '0-0',
    children: [
      {
        title: '0-0-0',
        key: '0-0-0',
        children: [
          { title: '0-0-0-0', key: '0-0-0-0' },
          { title: '0-0-0-1', key: '0-0-0-1' },
          { title: '0-0-0-2', key: '0-0-0-2' }
        ]
      },
      {
        title: '0-0-1',
        key: '0-0-1',
        children: [
          { title: '0-0-1-0', key: '0-0-1-0' },
          { title: '0-0-1-1', key: '0-0-1-1' },
          { title: '0-0-1-2', key: '0-0-1-2' }
        ]
      },
      {
        title: '0-0-2',
        key: '0-0-2'
      }
    ]
  },
  {
    title: '0-1',
    key: '0-1',
    children: [
      { title: '0-1-0-0', key: '0-1-0-0' },
      { title: '0-1-0-1', key: '0-1-0-1' },
      { title: '0-1-0-2', key: '0-1-0-2' }
    ]
  },
  {
    title: '0-2',
    key: '0-2'
  }
]

export default {
  data() {
    return {
      expandedKeys: ['0-0-0', '0-0-1'],
      autoExpandParent: true,
      checkedKeys: ['0-0-0'],
      selectedKeys: [],
      treeData,
      visible: false,
      loading: false,
      wrapperCol: { span: 14 },
      labelCol: { span: 4 },
      form: {
        name: '',
        nameCN: '',
        nameEN: '',
        taskType: undefined,
        date1: undefined,
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      headers: {
        authorization: 'authorization-text'
      }
    }
  },
  methods: {
    onExpand(expandedKeys) {
      console.log('onExpand', expandedKeys)
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    onCheck(checkedKeys) {
      console.log('onCheck', checkedKeys)
      this.checkedKeys = checkedKeys
    },
    onSelect(selectedKeys, info) {
      console.log('onSelect', info)
      this.selectedKeys = selectedKeys
    },
    handleChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully`)
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    },

    //弹窗
    showModal() {
      this.visible = true
    },
    handleOk() {
      this.loading = true
      setTimeout(() => {
        this.visible = false
        this.loading = false
      }, 3000)
    },
    handleCancel() {
      this.visible = false
    },
    addList() {
      this.visible = true
    }
  },
  watch: {
    checkedKeys(val) {
      console.log('onCheck', val)
    }
  }
}
</script>

<style lang="less" scoped>
.ground /deep/ .list .ant-card-head-title {
  text-align: left;
}
.ground /deep/ .list .ant-card-body {
  text-align: left;
}

.ground {
  width: 100%;
  height: 100%;
  .list {
    width: 100%;
    height: 100%;
  }
}
</style>
